<template>
    <div>
        <el-row type="flex" justify="center"><!-- 行 -->
            <el-col :span="7" class="loginForm">
                <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                    <el-form-item label="员工名" prop="ename">
                        <el-input v-model="form.ename"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio-group v-model="form.esex">
                            <el-radio label="男">男</el-radio>
                            <el-radio label="女">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="员工工资" prop="salary">
                        <el-input type="number" v-model="form.salary"></el-input>
                    </el-form-item>
                    <el-form-item label="员工密码" prop="pwd">
                        <el-input v-model="form.pwd"></el-input>
                    </el-form-item>
                    <el-form-item label="出生日期" prop="bornDate">
                        <el-date-picker
                                v-model="form.bornDate"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="部门">
                        <el-select v-model="form.dno" placeholder="请选择部门">
<!--                            <el-option label="101" value="101">大总管</el-option>-->
<!--                            <el-option label="102" value="102">主公</el-option>-->
<!--                            <el-option label="103" value="103">大将军</el-option>-->
                            <el-option
                                    v-for="d in deptList"
                                    :key="d.dno"
                                    :label="d.dname"
                                    :value="d.dno">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import Qs from 'qs';

    export default {
        name: "Reg",
        data() {
            return {
                form: {
                    ename: '',
                    esex: '男',  //只要data里面的表单数据给上默认值和表单项里面值是一样就会设置为默认值
                    salary: 0,
                    pwd: '',
                    bornDate: '',
                    dno: 101
                },
                rules: { //设置表单验证规则 在form标签要有:rules="rules"属性
                    ename:[//ename 要和el-form-item 设置prop属性值和ename一样可以应用验证规则
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    bornDate: [
                        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    salary:[
                        { required: true, message: '请输入员工工资', trigger: 'blur' }
                    ],
                    pwd:[
                        { required: true, message: '请输入用户民吗', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ]
                },
                deptList:[]//给个空数组
            }
        },
        methods: {
            onSubmit(formName) {
                //console.log('submit!');
                //axios
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                        let vm = this;
                        vm.$axios({
                            method: "post",
                            url: "http://localhost:8081/emp/addEmp",
                            transformRequest: [
                                function (data) {
                                    let stringify = Qs.stringify(data);
                                    console.log(stringify);
                                    return stringify;
                                }
                            ],
                            data: {
                                ename: vm.form.ename,
                                esex: vm.form.esex,
                                salary: vm.form.salary,
                                pwd: vm.form.pwd,
                                bornDate: vm.form.bornDate,
                                dno: vm.form.dno
                            }
                        }).then(function (response) {
                            //获取服务器响应
                            let data = response.data;
                            if (data != "" && data == "success") {
                                vm.$message({
                                    message: '注册成功,现在为您转去登录页面',
                                    type: 'success'
                                });
                                //设置定时器 1.5秒后执行页面跳转
                                //只会执行1次, 倒计时执行
                                setTimeout(function () {
                                    vm.$router.push("/")
                                }, 1500)
                            } else {
                                vm.$message.error('注册失败,您太优秀了,我们不配拥有您');
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            getDeptList(){
                let vm  = this;
                vm.$axios({
                    method:"get",
                    url:"http://localhost:8081/dept/getAll"
                }).then(function (response) {
                    //获取服务器响应数据
                    let data = response.data;
                    //console.log(data);
                    //把获取到的数据赋值给data里面的deptList
                    vm.deptList=data;
                })
            }
        },
        created(){
            //调用获取 dept列表数据的方法
            this.getDeptList();
        }
    }
</script>

<style scoped>

</style>